<script setup>

import {ref} from "vue";
import axios from "axios";

const headers = {
  Authorization: localStorage.getItem("auth")
}
const userId = ref("");
//定义表格的引用
const userLogTableRef = ref();
//存储用户日志相关数据
const userLog = ref({
  records:[]
})
const userLogPageLoading = ref(true);
//当前页码
const userLogPageIndex = ref(1);
const getUserLogPage = () => {
  userLogPageLoading.value = true;
  axios.post("/api/userLog", {
    pageIndex: userLogPageIndex.value,
    pageSize: 8,
    userId: userId.value
  }, {
   headers}).then(response => {
      console.log("获取成功");
      userLog.value = response.data.value;  //将从接口获取到的数据，赋值给goodsPage对象
      userLogPageLoading.value = false;
    }).catch(error => {
      console.log("获取失败", error.response);
      userLogPageLoading.value = false;
    })

}
getUserLogPage();

const currentUser = ref();

//表示单击行
const handleRowClick = row => {
  userLogTableRef.value.data.forEach(r => {
    userLogTableRef.value.toggleRowSelection(r, r.id == row.id);
  })
  currentUser.value = row;
  console.log("点击一行了",row);
}
//选择数据key集合
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
  if (multipleSelection.value.length == 1) {
    currentUser.value = multipleSelection.value[0];
  } else {
    currentUser.value = null;
  }
}

</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户日志</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="view">
    <div class="vHead">
      <div class="vHLeft">
        <el-input v-model="userId" placeholder="用户id" style="width:80px" />&nbsp;&nbsp;
        <el-button type="primary" @click="getUserLogPage">搜索</el-button>
      </div>
    </div>
    <div>
      <template v-if="userLog != null">
      <el-table :data="userLog.records"
                v-loading="userLogPageLoading"
                row-key="id"
                ref="userLogTableRef"
                @current-change="handleRowClick"
                @selection-change="handleSelectionChange"
                stripe
                highlight-current-row
                empty-text="暂无数据"
                style="width: 100%">
        <el-table-column stripe type="selection" />
        <el-table-column prop="id" label="id"  />
        <el-table-column prop="userId" label="用户id" />
        <el-table-column prop="operational" label="操作"  />
        <el-table-column prop="time" label="操作时间"  />
      </el-table>
      <el-pagination background layout="prev, pager, next"
                     default-page-size="9"
                     :total="userLog.total"
                     v-model:current-page="userLogPageIndex"
                     @current-change="getUserLogPage"/>
      </template>
    </div>
  </div>
</template>

<style scoped>

</style>